<template>
  <div>
    <el-page-header :content="`会员 ${row.memberId} 问卷情况`" @back="goBack" />
    <el-form v-for="(item, index) in row.recyclingQuestions" ref="dynamicValidateForm" :key="index" :model="item" style="margin-top: 10px">
      <el-card style="margin-bottom: 10px">
        <el-form-item
          prop="title"
        >
          {{ index + 1 }}. {{ item.title }}{{ item.type == 1 ? '【单选】' : item.type == 2 ? '【多选】' : '' }}
        </el-form-item>
        <el-form-item v-if="item.type === 1 || item.type === 2">
          <el-radio-group v-model="selectedOption">
            <el-row>
              <el-col v-for="(itemO, indexO) in item.options" :key="indexO" :span="24">
                <el-radio
                  :disabled="true"
                  :label="itemO.disabled"
                  :checked="selectedOption === itemO.disabled"
                >{{ itemO.value }}</el-radio>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-for="(itemO, indexO) in item.options" v-else-if="item.type === 3 || item.type === 4" :key="indexO">
          <el-input v-if="item.type === 3" v-model="itemO.value" type="text" :disabled="true" />
          <el-input v-if="item.type === 4" v-model="itemO.value" type="textarea" :disabled="true" />
        </el-form-item>

        <div v-for="(itemO, indexO) in item.options" :key="indexO">
          <div v-for="(itemU,indexU) in itemO.unNo" :key="indexU">
            <el-form-item
              v-if="itemO.disabled"
              prop="title"
            >{{ itemU.untitle }}{{ itemU.untype == 1 ? '【单选】' : itemU.untype == 2 ? '【多选】' : '' }}
            </el-form-item>
            <!--              <el-input  v-model="itemU.untitle" type="text" :disabled="true" />-->
            <!--            <el-form-item v-if="itemU.untype === 1 || itemU.untype === 2">-->
            <!--              <el-radio-group v-model="selectedOption" style="margin:0 0">-->
            <!--                <div v-for="(itemD,indexD) in itemU.unoptions" v-if="itemO.disabled" :key="indexD">-->
            <!--                  <el-radio-->
            <!--                    :disabled="true"-->
            <!--                    :label="itemD.undisabled"-->
            <!--                    :checked="selectedOption === itemD.undisabled"-->
            <!--                  >{{ itemD.unvalue }}</el-radio>-->
            <!--                </div>-->
            <!--              </el-radio-group>-->
            <!--            </el-form-item>-->

            <el-form-item v-if="itemU.untype === 1 || itemU.untype === 2">
              <el-radio-group v-model="selectedOption">
                <el-row>
                  <el-col v-for="(itemD, indexD) in itemU.unoptions" :key="indexD" :span="24">
                    <el-radio
                      v-if="itemO.disabled"
                      :disabled="true"
                      :label="itemD.undisabled"
                      :checked="selectedOption === itemD.undisabled"
                    >{{ itemD.unvalue }}</el-radio>
                  </el-col>
                </el-row>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="itemU.untype === 3" v-for="(itemD, indexD) in itemU.unoptions" :key="indexD">
              <el-input v-if="itemO.disabled" v-model="itemD.unvalue" type="text" :disabled="true" />
            </el-form-item>

          </div>
        </div>

      </el-card>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'RecallQuestionnaire',
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedOption: true
    }
  },
  methods: {
    goBack() {
      this.$emit('show')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row{
}
.el-col{
  //margin: 10px 0;
  padding: 10px 0;
}
.el-radio-group{
  margin-top: -20px;
}
</style>
